<template>
	<view class="wrap">
		<u-form>
			<u-form-item label="学期目标(km)">
				<u-input type="number" v-model="goalKm" placeholder="例如 100" />
			</u-form-item>
		</u-form>
		<view style="padding:16rpx 0">
			<u-button type="primary" @click="save">保存目标</u-button>
		</view>
		<u-cell-group class="card" style="margin-top:12rpx">
			<u-cell title="已完成" :value="doneKm.toFixed(2) + ' km'" />
			<u-cell title="剩余" :value="Math.max(goalKm - doneKm, 0).toFixed(2) + ' km'" />
		</u-cell-group>
	</view>
</template>
<script setup>
	import {
		ref,
		onMounted
	} from 'vue'
	const goalKm = ref(0);
	const doneKm = ref(0)
	onMounted(() => {
		goalKm.value = Number(uni.getStorageSync('goal_km') || 0)
		const list = uni.getStorageSync('run_history') || []
		doneKm.value = list.reduce((s, x) => s + (x.distance || 0) / 1000, 0)
	})

	function save() {
		uni.setStorageSync('goal_km', goalKm.value);
		uni.showToast({
			title: '已保存',
			icon: 'success'
		})
	}
</script>
<style scoped>
	.wrap {
		padding: 16rpx
	}
</style>
